"use client"

import { useEffect, useState } from "react"
import { cn } from "@/lib/utils"
import TimeSelector from "@/components/time-selector"
import DataMatrix from "@/components/data-matrix"
import AchievementCenter from "@/components/achievement-center"
import { generateMockData } from "@/lib/data-utils"

interface DashboardProps {
  data: {
    matrix: number[][];
    previousMatrix: number[][];
    achievements: Array<{
      id: string;
      name: string;
      unlocked: boolean;
      progress: number;
    }>;
  };
}

export default function Dashboard({ data }: DashboardProps) {
  const [selectedTimeIndex, setSelectedTimeIndex] = useState(0)
  const [deviceTilt, setDeviceTilt] = useState({ x: 0, y: 0 })
  const [isIdle, setIsIdle] = useState(false)
  console.log(data);
  
  const timeFrames = data.leftDate

  // Handle device orientation for parallax effect
  useEffect(() => {
    let idleTimer: NodeJS.Timeout

    const handleOrientation = (event: DeviceOrientationEvent) => {
      if (event.beta && event.gamma) {
        setDeviceTilt({
          x: event.gamma / 60, // -60 to 60
          y: event.beta / 60, // -60 to 60
        })
      }
    }

    const resetIdleTimer = () => {
      clearTimeout(idleTimer)
      setIsIdle(false)
      idleTimer = setTimeout(() => setIsIdle(true), 30000) // 30 seconds
    }

    window.addEventListener("deviceorientation", handleOrientation)
    window.addEventListener("mousemove", resetIdleTimer)
    window.addEventListener("touchstart", resetIdleTimer)

    resetIdleTimer()

    // Simulate data updates
    const dataInterval = setInterval(() => {
      // Assuming generateMockData is called elsewhere in the component
      // If not, you might want to call it here to update the data
    }, 5000)

    return () => {
      window.removeEventListener("deviceorientation", handleOrientation)
      window.removeEventListener("mousemove", resetIdleTimer)
      window.removeEventListener("touchstart", resetIdleTimer)
      clearInterval(dataInterval)
      clearTimeout(idleTimer)
    }
  }, [])

  return (
    <main
      className={cn(
        "flex h-screen w-full overflow-hidden bg-black text-white transition-colors duration-1000",
        isIdle && "bg-[#050508]", // Dark matter mode
      )}
    >
      <div
        className="absolute inset-0 opacity-20 pointer-events-none"
        style={{
          backgroundImage: `radial-gradient(circle at ${50 + deviceTilt.x * 10}% ${50 + deviceTilt.y * 10}%, rgba(50, 50, 50, 0.3), transparent 70%)`,
          transform: `translate(${deviceTilt.x * 10}px, ${deviceTilt.y * 10}px)`,
        }}
      />

      <div className="flex w-full h-full">
        {/* Time Navigation Area - 20% */}
        <section className="w-1/5 h-full border-r border-gray-800 flex flex-col justify-center items-center relative">
          <TimeSelector timeFrames={timeFrames} selectedIndex={selectedTimeIndex} onSelect={setSelectedTimeIndex} />
        </section>

        {/* Data Matrix Area - 60% */}
        <section className="w-3/5 h-full flex items-center justify-center">
          <DataMatrix data={data} />
        </section>

        {/* Achievement Center - 20% */}
        <section className="w-1/5 h-full border-l border-gray-800 flex flex-col items-center justify-center">
          <AchievementCenter achievements={data.achievements} />
        </section>
      </div>
    </main>
  )
}

